<template>
  <div>
    <MyDialog>
      <template v-slot:head>
        标题
      </template>
      <template v-slot:content>
        内容
      </template>
      <template #footer>
        <button>确定</button>
      </template>
    </MyDialog>
  </div>
</template>

<script>
/*
插槽 - 具名插槽
需求:一个组件内有多处结构，需要外部传入标签，进行定制
*****************************************
具名插槽语法
1. 多个slot使用name属性区分名字
    <div class="dialog-header">
      <slot name="head"></slot>
    </div>
    <div class="dialog-content">
      <slot name="content"></slot>
    </div>
    <div class="dialog-footer">
      <slot name="footer"></slot>
    </div>
2.template配合v-slot:名字来分发对应标签
    <MyDialog>
      <template v-slot:head>  <!--<template #head>是简写也可以  -->
        大标题
      </template>
      <template v-slot:content>
        内容文本
      </template>
      <template v-slot:footer>
        <button>按钮</button>
      </template>
    </MyDialog>
*/
import MyDialog from './components/MyDialog.vue'
export default {
  data () {
    return {

    }
  },
  components: {
    MyDialog
  }
}
</script>

<style>
body {
  background-color: #b3b3b3;
}
</style>